<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>路由入门案例</title>
</head>
<body>
<div id="app">
    <!-- <a href="设定跳转的地址">百度</a> -->

    <!-- 二:定义链接
            1.router-link 被编译之后转化为a标签
            2.关键字 to    被编译之后转化为href属性
     -->
    <router-link to="/user">用户</router-link>
    <router-link to="/dog">狗狗</router-link>

    <!--三: 指定路由的填充位置 未来展现组件信息
        填充的位置被解析之后 就是一个DIV
     -->
    <router-view></router-view>
</div>

<!-- 定义组件的标签体 -->
<template id="userTem">
    <div>
        <h3>用户信息</h3>
    </div>
</template>

<template id="dogTem">
    <div>
        <h3>狗狗信息</h3>
    </div>
</template>



<!-- 1.导入路由JS    先导入vue.js  再导入路由.js 顺序问题 -->
<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>

<script>

    /**
     * 第四步: 准备组件,定义路由对象
     */
    let userCom = {
        template: "#userTem"
    }

    let dogCom= {
        template: "#dogTem"
    }

    /**
     * 定义路由对象
     * routes:  路由的多个映射通过该属性进行定义.
     */
    let vueRouter = new VueRouter({
        routes: [
            {path: "/",redirect:"/user"},
            {path: "/user", component: userCom},
            {path: "/dog",  component: dogCom}
        ]
    })

    const APP = new Vue({
        el: "#app",
        data: {
        },
        //实现路由的挂载
        router: vueRouter
    })
</script>
</body>
</html>
